<template>
  <div
  
  >
    <div 
      id="investBox"

      >
      <div class="investTopBox">
        <Search id="searchBox" @filterResult="filterResult" @toSearch="toSearch1"></Search>
        <Sort @getSort1="getSort" v-show="!iSearchPage"></Sort>
      </div>
      <!-- <RecommendItem type="platformDetail" v-show="!iSearchPage" v-for="item in listItems" :key="item.id" :item="item" style="margin:0 auto .38rem;" v-if="listItems||listItems.length !=0"></RecommendItem> -->
      <!-- <mt-loadmore 
        :top-method="loadTop" 
        ref="loadmore"
        :autoFill="false"
        > -->
          <Recommend 
            v-infinite-scroll="loadMore"
            :infinite-scroll-disabled="loading"
            infinite-scroll-distance="20px"
            :cpList="listItems" 
            v-show="!iSearchPage" 
            v-if="listItems||listItems.length !=0"></Recommend>
        <!-- </mt-loadmore> -->
      <div v-else style="font-size:.4rem;color:#c9c9c9;text-align:center">无筛选结果</div>
        <p style="text-align:center;" v-show="onLoading">
          <inline-loading></inline-loading><span style="vertical-align:middle;display:inline-block;font-size:14px;">&nbsp;&nbsp;加载中...</span>
        </p>
    </div>
    <BottomBar></BottomBar>
  </div>
</template>
<script>
import Search from './children/Search'
import Sort from './children/Sort'
import RecommendItem from '../../component/common/RecommendItem'
import Recommend from '../index/children/Recommend'
import BottomBar from '../../component/common/BottomBar'
import {getSDK} from '../../../service/wxShare.js'
import {getSearch,getIndex,getAllcp} from '../../../service/getData.js'
import { Loadmore } from 'mint-ui';
import { InfiniteScroll } from 'mint-ui';
import { InlineLoading } from 'vux'

export default {
  components:{
    Search,
    Sort,
    RecommendItem,
    BottomBar,
    Recommend,
    InlineLoading
  },
  beforeCreate(){
    getSDK()
  },
  created(){
    // getSearch('')
    //   .then(res=>{
    //     console.log(res)
    //     // this.listItems = res.list
    //     // this.defaultList = JSON.parse(JSON.stringify(res.list))
    //   })
    this.listItems = []
    if(this.$route.query.lc_type){
      getAllcp('0','0',this.$route.query.lc_type)
        .then(res=>{
          if(res.status == 1){
            // console.log(res);
            if(res.cplist){
              this.listItems = res.cplist
              this.defaultList = JSON.parse(JSON.stringify(res.cplist))//深拷贝作为初始值
            }
          }
        })
    }else{
      getAllcp()//获取items的list
        .then(res=>{
            // console.log(res);
            if(res.status == 1){
                // console.log(res.cplist);
                this.listItems = res.cplist
                this.defaultList = JSON.parse(JSON.stringify(res.cplist))//深拷贝作为初始值
            }
        })
    }
  },
  data(){
    return {
      listItems:[],
      sortType:0,
      defaultList:[],
      iSearchPage:false,
      loading:false,
      onLoading:false,
      lc_type:''
    }
  },
  methods:{
    loadMore() {
      // if(!this.onLoading){
      //   this.onLoading = true
      //   console.log('123');
      //   setTimeout(() => {
      //     this.listItems.push('1')
      //     this.loading = false;
      //     this.onLoading = false
      //   }, 3000);
      // }
    },
    loadTop() {
      // 加载更多数据
      this.$refs.loadmore.onTopLoaded();
    },
    toSearch1(data){
      this.iSearchPage = data
    },
    getSort(data){
      this.sortType = data
    },
    filterResult(data){
      if(data){
        
      }
      this.listItems = data
      this.defaultList = JSON.parse(JSON.stringify(data))
    },
    compare1(property){//年化 and 返利排序
      return (a,b)=>{
        var val1 = a[property];
        var val2 = b[property]
        return val1 - val2 
      }
    },
    compare2(property){//期限排序
      return (a,b)=>{
        let reg = /(\d+).*/
        var val1 = a[property].replace(reg,"$1")
        var val2 = b[property].replace(reg,"$1")
        if(a['qixianlx'] === 'month'){
          val1 = val1*30
        }
        if(b['qixianlx'] === 'month'){
          val2 = val2 * 30
        }
        return val1 - val2
      }
    },
    // compare3(property){
    //   return (a,b)=>{
    //     let reg = /(\d+).*/
    //     var val1 = a[property].replace(reg,"$1")
    //     var val2 = b[property].replace(reg,"$1")
    //     return val1 - val2
    //   }
    // },
  },
  watch:{//监听是哪种排序
    sortType(val){
      switch(val){
        case 1:
          this.listItems.sort(this.compare1('yqnh'))
        break;
        case 2:
          this.listItems.reverse()
        break;
        case 3:
          this.listItems.sort(this.compare2('qixian'))
        break;
        case 4:
          this.listItems.reverse()
        break;
        case 5:
          this.listItems.sort(this.compare1('zgfl'))
        break;
        case 6:
          this.listItems.reverse()
        break;
        case 0:
          this.listItems = JSON.parse(JSON.stringify(this.defaultList))
        break;
      }
    }
  },
  deactivated () {
    this.$destroy()
  }
}
</script>
<style lang="less">
@import '../../../style/mixin.less';
@import "../../../style/mint.css";

  #investBox{
    width: 92%;
    margin: 0 auto;
    padding-bottom: 1.5rem;
    // background-color: yellowgreen;
    // .investTopBox{
    //   .fx(row);
    //   width: 100%;
    // }
  }
  .weui-tabbar{
    position: fixed !important;
  }
  .iconSearch{
    width:.5rem;
    height: .5rem;
    position: absolute;
    top: 0.4rem;
    left: 0.7rem;
  }
</style>
